<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{title}}</h1>
        <hr>
        <head-one></head-one>
        <Demo></Demo>
        <p>
            <input type="text" v-model="word">
        </p>
        <parent id='2110' msg="Are you OK?" :title="title" :word="word"></parent>
    </div>
    <template id="demo">
        <div>
            <h2>Demo - Demo - Demo </h2>
        </div>
    </template>

    <template id="parent">
        <div>
            <h2>Parent - 父组件</h2>
            <h5>props -- {{id}} --{{msg}} -- {{title}} -- {{word}}</h5>
            <hr>
            <!-- !!!!!特别要注意这个位置 父组件必须获取vue中声明的值 不然无法通过父组件给子组件 就是下面的:prop-a等等-->
            <child-one :prop-a="propA" :prop-b="propB" :propc="propC" :prop-d="propD"></child-one>
            <hr>
            <child-two :address="address" :offer="offer">
            </child-two>
        </div>
    </template>

    <template id="childone">
        <div>
            <h2>
                Childone - 1 - 子组件
            </h2>
            <h4>propA -- {{propA}}</h4>
            <h4>propB --- {{propB}}</h4>
            <h4>propc =- {{propc}}</h4>
            <h4>propD == {{propD}}</h4>
        </div>
    </template>

    <template id="childtwo">
        <div>
            <h2>
                childtwo - 2 - 子组件
            </h2>
            <h4>address === {{address}}</h4>
            <h2>我的 offer --- {{offer}}</h2>
        </div>
    </template>

    <script>
        const head = {
            template: "<h2>Head - Head - WH2110-daydayup</h2>"
        }
        Vue.component("HeadOne", head)

        // 这是和上面id为demo的绑定
        Vue.component('Demo', {
            template: '#demo'
        });


        Vue.component('parent', {
            template: '#parent',
            props: ['id', 'msg', 'title', 'word'],//这里没有校验Prop的类型
            data() {
                return {
                    propA: '组件prop 传递数据的',
                    propB: '组件中还有父组件和子组件',
                    propC: '各种关系中就是父子或者兄弟关系',
                    propD: '需要注意父子关系之间的联系',
                    address: "湖北武汉金融港-B18",
                    offer: "20K"
                }
            },
            components: {
                childTwo: {
                    template: '#childtwo',
                    props: {
                        address: [String, Boolean],//这里是做数据类型的判断
                        offer: {
                            type: String,
                            default: () => {
                                return "1000"
                            }
                        }
                    }
                }
            }
        })

        Vue.component("childOne", {
            template: "#childone",
            props: {
                propA: String,  // 类型校验
                propB: String,
                propc: [String, Number],
                propD: {
                    type: String,
                    default: "这是默认的值"
                }
            }
        })


        // 根实例 根组件
        const vm = new Vue({
            data: {
                title: "Vue 组件 重要的属性  Prop  ",
                word: 'wh2110-daydayup'
            },
            mounted() {
                document.getElementsByTagName("title")[0].innerHTML = this.title;
            }
        }).$mount("#app")



    </script>
</body>

</html>